<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns="http://www.w3.org/1999/html">
<head>
    <th:block th:include="include :: header('账单详情')"/>
    <th:block th:include="include :: toastr-css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <style>

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }

        .container {
            width: calc(100% - 20px); /* 左右各留 从 100% 的宽度中减去 20 像素 边距 */
            margin: 20px auto; /* 第一个值（20px）表示上下外边距为 20 像素， 第二个值（auto）表示左右外边距自动计算，使容器水平居中*/
            padding: 20px; /*padding 是内边距属性，用于控制容器内容与容器边框之间的距离， 20px 表示容器的上下左右内边距均为 20 像素*/
            background-color: #fff; /* 设置容器的背景颜色 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 为容器添加阴影效果 */
            border-radius: 8px; /* 设置容器的圆角 */
        }

        h1 {
            text-align: center;
            color: #444;
            margin-bottom: 20px;
            font-size: 1.8em;
        }

        .summary {
            text-align: center;
            margin-bottom: 20px;
            font-size: 1.2em;
        }

        .summary p {
            margin: 5px 0;
        }

        .date-group {
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .date-header {
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 1.1em;
            color: #555;
        }

        .transaction {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            margin-bottom: 10px;
            background-color: #fff;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            min-width: 0; /* 允许内容压缩 */
        }

        .transaction:last-child {
            margin-bottom: 0;
        }

        .transaction-type {
            flex-shrink: 0; /* 禁止被挤压 */
            display: flex;
            align-items: center;
            font-weight: bold;
        }

        .transaction-type.pay {
            white-space: nowrap !important;
            color: #d9534f; /* 支出保持红色 */
        }

        .transaction-type.income {
            white-space: nowrap !important;
            color: #5cb85c; /* 收入为绿色 */
        }

        .transaction-type.ignore {
            white-space: nowrap !important;
            color: #f0ad4e; /* 转账为黄色 */
        }

        .icon {
            margin-right: 8px;
        }

        .transaction-details {
            font-size: 0.9em;
            color: #777;
            text-align: left;
            flex: 1;
            margin-left: 10px;
            white-space: nowrap !important;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0; /* 允许内容被挤压 */
        }

        @media (max-width: 600px) {
            .container {
                width: 100%;
                padding: 10px;
                margin: 10px auto;
                box-shadow: none;
                border-radius: 0;
            }

            h1 {
                font-size: 1.5em;
            }

            .summary {
                font-size: 1em;
            }

            .date-group {
                padding: 10px;
                margin-bottom: 15px;
            }

            .date-header {
                font-size: 1em;
            }

            .transaction {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px;
                margin-bottom: 10px;
                background-color: #fff;
                border-radius: 6px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                min-width: 0; /* 允许内容压缩 */
            }

            .transaction-type {
                margin-bottom: 0; /* 取消底部间距 */
                font-size: 0.9em;
                flex-shrink: 0; /* 禁止被挤压 */
                white-space: nowrap !important; /* 防止文本换行 */
                overflow: hidden; /* 隐藏超出部分 */
                text-overflow: ellipsis; /* 超出部分显示省略号 */
            }

            .transaction-details {
                font-size: 0.9em;
                color: #777;
                text-align: left;
                flex: 1;
                margin-left: 10px;
                white-space: nowrap; /* 防止文本换行 */
                overflow: hidden;
                text-overflow: ellipsis; /* 超出部分显示省略号 */
                max-width: 60%; /* 限制最大宽度 */
            }

            .transaction-type .icon {
                font-size: 0.9em; /* 减小图标大小 */
            }
        }

    </style>

</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight"
     style="padding-left: 8px !important; padding-right: 8px; !important">

    <div class="container">

        <!--  标题      -->
        <h1 class="summary" th:text="(${month})+' 账单明细'">2025年3月财务记录</h1>

        <!-- 总收入/总支出/不计入      -->
        <span style="font-size: 0.9em; font-weight: bold; text-align: center; display: block;">
            总收入：<span th:text="${totalIncome}" style="color: green;"></span>，
            总支出：<span th:text="${totalPay}" style="color: red;"></span>，
            不计入：<span th:text="${totalIgnore}" style="color: orange;"></span>
        </span>

        </br>


        <div class="date-group" th:each="item,temp : ${moneyGroupByDay}">

            <!--     日期/星期       -->
            <div class="date-header" style="display: flex; justify-content: space-between; align-items: center;">
                <span th:text="${item.moneyDate}+ ' ' + ${item.moneyWeek}">3月11日 星期二</span>
                <!--     出/入/不计入           -->
                <span style="font-size: 0.7em; font-weight: bold; text-align: left;">
                        出：<span th:text="${item.payCount}" style="color: red;"></span>，
                        入：<span th:text="${item.incomeCount}" style="color: green;"></span>，
                        不计入：<span th:text="${item.ignoreCount}" style="color: orange;"></span>
                </span>
            </div>

            <!--     按天显示账单       -->
            <div class="transaction" th:each="moneyDay,moneyDayp : ${item.montyListByDay}">
                <div th:classappend="${moneyDay.status == '1'} ? 'transaction-type income' :
                      (${moneyDay.status.trim() == '2'} ? 'transaction-type pay' : 'transaction-type ignore')">
                    <i th:classappend="${moneyDay?.get('classIcon')}" class="icon"></i><span
                        th:text="${moneyDay.className}"></span>
                </div>
                <div class="transaction-details" th:text="${moneyDay.moneyIntroduce}">19:14 | 杭州万桩</div>
                <div th:classappend="${moneyDay.status == '1'} ? 'transaction-type income' :
                      (${moneyDay.status.trim() == '2'} ? 'transaction-type pay' : 'transaction-type ignore')"
                     th:text="${moneyDay.money}">-1.00
                </div>
            </div>

        </div>

    </div>


</div>

<th:block th:include="include :: footer"/>

</body>
</html>
